<template>
    <view class="popup-rules">
        <button class="popup-rules__btn" @tap="open">补贴规则</button>

        <cl-popup direction="center" :visible.sync="visible">
            <text class="popup-rules__close cl-icon-close" @tap="close"></text>

            <scroll-view scroll-y class="popup-rules__container">
                <view class="popup-rules__rich-mp">
                    <jyf-parser :html="content"></jyf-parser>
                </view>
            </scroll-view>
        </cl-popup>
    </view>
</template>

<script>
import JyfParser from '@/components/jyf-parser/jyf-parser';

export default {
    components: {
        JyfParser
    },

    data() {
        return {
            content: '',
            visible: false
        };
    },

    methods: {
        open() {
            this.$hmt.push('首页点击事件', '进入分享有礼');

            this.$service.shareTemplate
                .template({
                    type: 15
                })
                .then(res => {
                    this.content = res;
                    this.visible = true;
                });
        },

        close() {
            this.visible = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.popup-rules {
    .cl-popup {
        border-radius: 14rpx;

        &__container {
            padding: 0;
        }
    }

    &__btn {
        position: absolute;
        right: 0;
        top: 225rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 6rpx 20rpx;
        margin: 0;
        border-radius: 30rpx 0 0 30rpx;
        z-index: 99;
        font-size: 24rpx;
        height: auto;
        line-height: normal;
        border: 0;

        &::after {
            border: 0;
        }
    }

    &__title {
        font-size: 30rpx;
        text-align: center;
        flex: 1;
    }

    &__close {
        position: absolute;
        right: 20rpx;
        top: 26rpx;
        font-size: 40rpx;
        z-index: 9;
    }

    &__container {
        padding: 5rpx 0;
        max-height: 800rpx;
        width: 600rpx;
    }

    &__rich {
        &-mp {
            padding: 0 20rpx;
        }
    }
}
</style>
